<template>
     <div class="context_ball">
        <div
          class="ball"
          :class="{ active_item: isFlag, is_active: active === index }"
          v-for="(item, index) in menuList"
          :key="index"
          @click="tabFun(item, index)"
          @mouseenter="mousemove(item, index)"
          @mouseleave="mouseleave(item, index)"
        >
          <img :src="active === index ? item.img2 : item.img" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
</template>

<script setup lang="ts">
  import image1 from "../../../public/image/重点车辆监管系统_nor.png";
import image2 from "../../../public/image/重点车辆监管系统_hov.png";
import image3 from "../../../public/image/非机动车未带头盔识别系统_nor.png";
import image4 from "../../../public/image/非机动车未带头盔识别系统_hov.png";
import image5 from "../../../public/image/交通安全画像系统_nor.png";
import image6 from "../../../public/image/交通安全画像系统_hov.png";
import image7 from "../../../public/image/交通态势监控系统_nor.png";
import image8 from "../../../public/image/交通态势监控系统_hov.png";
import image9 from "../../../public/image/可视化作战平台_nor.png";
import image10 from "../../../public/image/可视化作战平台_hov.png";
import image11 from "../../../public/image/重点车辆监管系统_nor.png";
import image12 from "../../../public/image/重点车辆监管系统_hov.png";

import { reactive, ref, onMounted } from "vue";
let menuList = reactive([
  {
    url: "",
    // img: './image/重点车辆监管系统_nor.png',
    img: image1,
    img2: image2,
    title: "重点车辆监管系统",
  },
  {
    url: "",
    img: image3,
    img2: image4,
    title: "非机动车未带头盔识别系统",
  },
  {
    url: "",
    img: image5,
    img2: image6,
    title: "交通安全画像系统",
  },
  {
    url: "",
    img: image7,
    img2: image8,
    title: "交通态势监控系统",
  },
  {
    url: "",
    img: image9,
    img2: image10,
    title: "可视化作战平台",
  },
  {
    url: "",
    img: image11,
    img2: image12,
    title: "重点车辆监管系统",
  },
]);
let isFlag: any = ref(false);
let active = ref(9);

// 鼠标进入
const mousemove = (v, i) => {
  isFlag.value = true;
  active.value = i;
};
// 鼠标移除
const mouseleave = (v, i) => {
  isFlag.value = false;
  active.value = 8;
  // console.log(v);
};
// 点击旋转的盒子时触发的事件
const tabFun = (v, i) => {
  alert(`您点击了${v.title}`);
};
onMounted(() => {
  
  const items = document.querySelectorAll(".ball");
   // 遍历每一个符合条件的元素
  for (let i = 0; i < items.length; i++) {
    console.log(i);
     // 设置每个元素的动画延迟时间
    items[i].style["animation-delay"] =
      -5 - 3.3 * i + "s," + -3.3 * i + "s," + -3.3 * i + "s";
  }
});
</script>

<style scoped lang="scss">
    .active_item {
    animation-play-state: paused;/* 暂停具有类“active_item”的元素的动画 */
  }

  

  @keyframes animX {
  0% {
    left: 0%; /* 定义动画“animX”的起始位置 */
  }

  100% {
    left: 60%; /* 定义动画“animX”的结束位置 */
  }
}

@keyframes animY {
  0% {
    top: 0px; /* 定义动画“animY”的起始位置 */
  }

  100% {
    top: 30%;/* 定义动画“animY”的结束位置 */
  }
}

@keyframes scale {
  0% {
    transform: scale(0.6);/* 定义动画“scale”的起始缩放 */
    z-index: 0;/* 设置初始z-index */
  }

  50% {
    transform: scale(1); /* 在动画中间缩放至100% */
    z-index: 3;/* 在动画中间设置较高的z-index */
  }

  100% {
    transform: scale(0.5);/* 在动画结束时缩放至50% */
    z-index: 0; /* 重置z-index为初始值 */
  }
}
.context_ball {
  width: 100%;
  height: 100%;
}
  // border: solid 1px #ccc;
  .ball {
    margin-top: 25%;
    margin-left: -5%;
    // border: solid 1px #ccc;
    // display: flex;
    flex-direction: column;
    width: 305px;
    height: 155px;
    /*background-color: #f66;*/
    position: absolute;
    // top: 100px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: yellow;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    // line-height: 10px;
    z-index: 33333;
    /*动画执行一次所需时间*/
    animation-duration: 10s, 10s, 20s;
    /*动画以何种运行轨迹完成一个周期*/
    // 第一个参数起始控制点 x 坐标  第二个参数起始控制点 y 坐标 第三个参数束控制点 x 坐标 第四个参数 结束控制点 y 坐标
    animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
    /*动画播放次数,无线循环播放*/
    animation-iteration-count: infinite;
    /*是否轮流反向播放动画 alternate:正向播放*/
    animation-direction: alternate;
    animation-name: animX, animY, scale;
    // animation-play-state: paused;
    img {
      width: 160px;
      height: 160px;
    }

    p {
      color: white;
      font-size: 25px;
    }
  }
  .is_active {
    p {
      color: yellow;
    }
  }
</style>